<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function() {
            var app4 = new Vue({
                el: '#app-4',
                methods:{
                    addthing:function(){
                        this.todos.push({name:this.thing,done:false});
                    },
                    switchthing:function(index){
                        this.todos[index].done=!this.todos[index].done;
                    }

                },
                data: {
                  thing:null,
                    message:'Todo List',
                    todos: [
                        { name: '吃饭',done:false },
                        { name: '睡觉',done:false},
                        { name: '哈哈哈',done:true}

                    ]
                },
                computed:{
                    undo:function(){
                        var count=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(!this.todos[i].done){
                                count++
                            }
                        }
                        return count;
                    }
                }

            });
        }


    </script>
    <style>.del{text-decoration: line-through}
    </style>
</head>
<body>

<div id="app-4">
    <p>{{ message }}</p>
    <input type="text" v-model="thing"/>

    <button v-on:click="addthing">添加</button>
    <div v-for="(todo,idx) in todos">
        <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchthing(idx)">{{idx}}.
       .<span v-bind:class="{del:todo.done}">{{todo.name}}</span>

    </div>
          共{{todos.length}}个事项,已完成{{todos.length-undo}}个,未完成{{undo}}个
</div>
</body>
</html>